// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);
// 给上传设置点击事件
$('#shangchuan').on('click',function() {
    $('#file').click();
})

// 实现图片的替换 在之前的学习中我们是通过接口进行获取赋值渲染到页面上 这时我们用cropper进行图片的替换 我们用Chage事件对file进行监控
$('#file').on('change',function(e){
    // 获取用户选着的文件
    var filelist=e.target.files;
    if(filelist.length===0){
        // 证明没有选择文件我们提示
        return layui.layer.msg('请选择照片!');
    }
    // 选择完照片要进行替换 去cropper进行相关操作
    var file = e.target.files[0];
    // 拿到相关的地址 这个形式的地址叫做64 适用于小图片不适应大图片 因为 会增大30%的体积
    var newImgURL = URL.createObjectURL(file);
    // 销毁旧的裁剪区域 重新设置图片路径 重新初始化裁剪区域
    $image.cropper('destroy').attr('src', newImgURL).cropper(options);        
});
$('#btnUpload').on('click', function(){
    var dataURL = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      }).toDataURL('image/png,image/jpg')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
      $.ajax({
          type: "post",
          url: "/my/update/avatar",
          data:{
            avatar: dataURL
          },
          success: function (res) {
              console.log(res);
            //  判断 
            if (res.status!=0) {
                return layui.layer.msg(res.message);
            }
            layui.layer.msg(res.message);
            // 渲染页面
            window.parent.getUserInfo();
          }
      });
})